<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { User } from '@/types/user';
  import { getUserDetail } from '@/api/user';
  import { useRoute } from 'vue-router';
  import dayjs from 'dayjs';
  import ProvinceJSON from '@/config/province.json';
  import CityJSON from '@/config/city.json';
  import UserGame from './user-game.vue';

  const route = useRoute();

  const loading = ref(false);
  const userInfo = ref<User | null>(null);

  const initUserInfo = async () => {
    try {
      loading.value = true;
      const res = await getUserDetail(route.query.id as string);
      userInfo.value = res.data.data;
    } finally {
      loading.value = false;
    }
  };

  onMounted(() => {
    initUserInfo();
  });
</script>

<template>
  <div class="main">
    <a-skeleton v-if="loading" animation>
      <a-space direction="vertical" :style="{ width: '100%' }" size="large">
        <a-skeleton-line :rows="3" />
        <a-skeleton-shape />
      </a-space>
    </a-skeleton>
    <a-row v-if="userInfo" :gutter="[30, 30]">
      <a-col>
        <div class="section-title">用户基本信息</div>
        <a-row :gutter="[12, 20]">
          <a-col :span="6">
            <div class="info-item">
              <div class="info-item-label"> 名称 </div>
              <div class="info-item-value">
                {{ userInfo.nickname }}
              </div>
            </div>
          </a-col>

          <a-col :span="6">
            <div class="info-item">
              <div class="info-item-label"> 年纪 </div>
              <div class="info-item-value">
                {{ userInfo.ageType === 1 ? '青少年' : '成人' }}
              </div>
            </div>
          </a-col>

          <a-col :span="6">
            <div class="info-item">
              <div class="info-item-label"> 性别 </div>
              <div class="info-item-value">
                {{ userInfo.sex ? '男' : '女' }}
              </div>
            </div>
          </a-col>

          <a-col :span="6">
            <div class="info-item">
              <div class="info-item-label"> 国籍 </div>
              <div class="info-item-value">
                {{ userInfo.nation }}
              </div>
            </div>
          </a-col>

          <a-col :span="6">
            <div class="info-item">
              <div class="info-item-label"> 注册时间 </div>
              <div class="info-item-value">
                {{ dayjs(userInfo.gmtCreate).format('YYYY/MM/DD HH:mm:ss') }}
              </div>
            </div>
          </a-col>

          <a-col :span="6">
            <div class="info-item">
              <div class="info-item-label"> 生日 </div>
              <div class="info-item-value">
                {{ dayjs(userInfo.birthday).format('YYYY年MM月DD日') }}
              </div>
            </div>
          </a-col>

          <a-col :span="6">
            <div class="info-item">
              <div class="info-item-label"> 证件类型 </div>
              <div class="info-item-value">
                {{ userInfo.idType }}
              </div>
            </div>
          </a-col>

          <a-col :span="6">
            <div class="info-item">
              <div class="info-item-label"> 证件号码 </div>
              <div class="info-item-value">
                {{ userInfo.idNo }}
              </div>
            </div>
          </a-col>

          <a-col :span="6">
            <div class="info-item">
              <div class="info-item-label"> 手机号 </div>
              <div class="info-item-value">
                {{ userInfo.phone }}
              </div>
            </div>
          </a-col>

          <a-col :span="6">
            <div class="info-item">
              <div class="info-item-label"> 监护人 </div>
              <div class="info-item-value">
                {{ userInfo.parent }}
              </div>
            </div>
          </a-col>

          <a-col :span="6">
            <div class="info-item">
              <div class="info-item-label"> 监护人邮箱 </div>
              <div class="info-item-value">
                {{ userInfo.parentEmail }}
              </div>
            </div>
          </a-col>

          <a-col :span="6">
            <div class="info-item">
              <div class="info-item-label"> 监护人手机 </div>
              <div class="info-item-value">
                {{ userInfo.parentTel }}
              </div>
            </div>
          </a-col>

          <a-col :span="12">
            <div class="info-item">
              <div class="info-item-label"> 地区 </div>
              <div class="info-item-value">
                {{
                  ProvinceJSON.find((i) => i.id === userInfo?.province)?.name
                }}
                {{
                  CityJSON[userInfo.province as keyof typeof CityJSON]?.find(
                    (i) => i.id === userInfo?.city
                  )?.name
                }}
              </div>
            </div>
          </a-col>
        </a-row>
      </a-col>

      <UserGame :user-id="route.query.id as string" />
    </a-row>
  </div>
</template>

<style lang="less" scoped>
  .main {
    padding: 12px;
    width: 1100px;
    margin: 20px auto;
    background: #fff;
  }

  .section-title {
    margin-bottom: 12px;
  }

  .info-item {
    &-label {
      color: var(--color-text-3);
      margin-bottom: 10px;
    }
  }
</style>
